<template>
	<w-container :diyNav="true">
		<view slot='nav' class="plr-16 flex flex-js-sb flex-1 flex-ai-center">
			<w-icon name="back-btn" size="24" @click='backPage'></w-icon>
			<!--  #ifdef  H5-->
			<u--input shape='circle' :placeholder="handleLang('请输入内容')" :customStyle='style' border="surround"
				v-model="search.keywords" confirmType='search' @confirm='searchFn' color="#000">
				<w-icon :name="search.keywords? 'search3':'search3'" slot='prefix' size="24"></w-icon>
				<u-icon name="close" v-if="search.keywords" color="#4a4a4a" slot='suffix' size="12"
					@click='search.keywords=null'></u-icon>
			</u--input>
			<!--  #endif -->
			<!--  #ifdef  APP-->
			<u-input shape='circle' :placeholder="handleLang('请输入内容')" :customStyle='style' border="surround"
				v-model="search.keywords" confirmType='search' @confirm='searchFn' color="#000">
				<w-icon :name="search.keywords? 'search3':'search3'" slot='prefix' size="24"></w-icon>
				<u-icon name="close" v-if="search.keywords" color="#4a4a4a" slot='suffix' size="12"
					@click='search.keywords=null'></u-icon>
			</u-input>
			<!--  #endif -->
		</view>
		<view class="flex goods-type" v-if="!isVshop">
			<view class="goods-type-item" :class='{active:search.goods_type==item.key}' v-for="item in goodsType"
				:key="item.key" @click="changeType(item.key)">
				{{handleLang(item.name)}}
			</view>
		</view>
		<view class="plr-16 flex flex-js-sb flex-w  ">
			<MarketCard class='mb-16' v-for="item in list" :key="item.id" :isVshop="isVshop" :market='item' />
		</view>
		<w-loading :type="loading" emptyType="search"></w-loading>
	</w-container>
</template>

<script>
	import MarketCard from './components/marketCard.vue'
	import {
		getMarketList,
		getMarketBoxList,
		getVintageShopMarketList
	} from '@/api/market/index.js'
	export default {
		components: {
			MarketCard
		},
		data() {
			return {
				style: {
					height: '72rpx',
					width: "600rpx",
					maxWidth: "600rpx",
					backgroundColor: '#fff',
					borderColor: '#fff !important'
				},
				loading: 'none',
				search: {
					goods_type: 2,
					keywords: null
				},
				goodsType: [{
						key: 2,
						name: '数字藏品'
					},
					{
						key: 1,
						name: "盲盒"
					}
				],
				list: [],
				isVshop: 0
			};
		},
		onReachBottom() {
			if (this.search.goods_type == 1) {
				this.loadMoreBox();
			}
		},
		onLoad({
			isVshop
		}) {
			this.isVshop = isVshop
		},
		methods: {
			changeType(type) {
				if (this.search.goods_type == type) return;
				this.list = []
				this.search.goods_type = type
				this.search.page = 1;
				this.search.list_rows = 20
				this.searchFn(this.search.keywords);
			},
			searchFn(v) {
				if (!v) return;
				if (this.isVshop) {
					this.getVshopList(this.search)
				} else {
					if (this.search.goods_type != 1) {
						this.searchCollection(this.search);
					} else {
						this.getBoxList(this.search);
					}
				}

			},
			loadMoreBox() {
				let search = this.$tools.copyObj(this.search);
				search.page++
				this.getBoxList(search);
			},
			getBoxList(search) {
				if (this.loading == 'loading') return;
				this.loading = 'loading'
				getMarketBoxList(search).then(res => {
					this.loading = 'none'
					if (res.data.data.length) {
						res.data.data.map(v => {
							this.$set(this.list, this.list.length, v)
						})
						this.search = search;
					}
					if (!res.data.total) {
						this.loading = 'empty'
					}
				})
			},
			searchCollection(search) {
				if (this.loading == 'loading') return;
				this.loading = 'loading'
				getMarketList(search).then(res => {
					this.loading = 'none'
					if (res.data.length == 0) {
						this.loading = 'empty'
					}
					this.list = res.data;
				})
			},
			getVshopList(search){
				if (this.loading == 'loading') return;
				this.loading = 'loading'
				getVintageShopMarketList(search).then(res => {
					this.loading = 'none'
					if (res.data.length == 0) {
						this.loading = 'empty'
					}
					this.list = res.data;
				})
			}

		}
	}
</script>

<style lang="scss">
	.goods-type {
		@extend .flex-js-center,
		.ptb-18,
		.flex-ai-center;

		&-item {
			@extend .mlr-13,
			.font-size-14,
			.font-color-minor;

			&.active {
				@extend .font-size-16,
				.font-color-textPrimary;
			}

			&:first-child {
				margin-left: 0;
			}

			&:last-child {
				margin-right: 0;
			}
		}
	}
</style>